<div class="cnsl-top-view">
  <div class="max-width-container">
    <div class="cnsl-top-row">
      <div class="cnsl-link-row">
        <a *ngIf="hasBackButton" cnslBack class="cnsl-link" mat-icon-button>
          <mat-icon class="icon">arrow_back</mat-icon>
        </a>
        <div class="cnsl-title-row-wrapper">
          <div class="cnsl-title-row">
            <h2 data-e2e="top-view-title" class="cnsl-title">{{ title }}</h2>
            <div
              class="cnsl-state-dot"
              *ngIf="isActive || isInactive"
              [matTooltip]="stateTooltip"
              [ngClass]="{ active: isActive, inactive: isInactive }"
            ></div>
          </div>
          <div class="cnsl-doc-row">
            <span class="cnsl-type">{{ sub }}</span>
            <a *ngIf="docLink" mat-icon-button [href]="docLink" rel="noreferrer" target="_blank">
              <mat-icon class="icon">info_outline</mat-icon>
            </a>
          </div>
        </div>
      </div>

      <span class="fill-space"></span>

      <ng-container *ngIf="hasActions">
        <button
          data-e2e="actions"
          class="cnsl-actions-trigger-desk"
          mat-raised-button
          color="primary"
          [matMenuTriggerFor]="actions"
        >
          <div class="cnsl-action-button">
            <span>{{ 'ACTIONS.ACTIONS' | translate }}</span>
            <mat-icon class="icon">keyboard_arrow_down</mat-icon>
          </div>
        </button>
        <button
          class="cnsl-actions-trigger-mob"
          matTooltip="{{ 'ACTIONS.ACTIONS' | translate }}"
          mat-icon-button
          [matMenuTriggerFor]="actions"
        >
          <i class="las la-ellipsis-v"></i>
        </button>

        <mat-menu #actions="matMenu" xPosition="before">
          <ng-content select="[topActions]"></ng-content>
        </mat-menu>
      </ng-container>

      <div *ngIf="hasContributors" class="mob-full-width">
        <ng-content select="[topContributors]"></ng-content>
      </div>
    </div>
    <ng-content select="[topContent]"></ng-content>
  </div>
</div>
